import { useAppDispatch, useAppSelector } from "@/store/hooks";
import { changeParams, getUserAsync } from "@/store/searchUser/searchUserSlice";
import { Button, Card, Input, Space } from "antd";
import { shallowEqual } from "react-redux";

export default function Filter() {
  const { params } = useAppSelector((state) => state.searchUser, shallowEqual);
  const dispatch = useAppDispatch();
  return (
    <Card>
      <Space
        wrap
        size="large"
        className="w-full flex justify-between"
        classNames={{ item: "last:ml-auto" }}
      >
        <label>
          <span>用户ID：</span>
          <Input
            value={params.query_user_id}
            className="max-w-[120px]"
            onChange={(e) => {
              dispatch(changeParams({ query_user_id: e.target.value }));
            }}
          />
        </label>
        <Button
          type="primary"
          onClick={() => {
            dispatch(getUserAsync({ ...params }));
          }}
        >
          查询
        </Button>
      </Space>
    </Card>
  );
}
